<template>
  <el-dialog :close-on-click-modal="false"   :title="form.id ? '编辑' : '新增'" :visible="show" :before-close="close">
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="姓名">
        <el-input disabled v-model="form.memberName" type="text" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="考勤组">
        <el-input disabled v-model="form.teamName" type="text" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="部门">
        <el-input disabled v-model="form.groupName" type="text" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="职位">
        <el-input disabled v-model="form.position" type="text" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="日期">
        <el-input disabled v-model="form.day" type="text" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="考勤时段">
        <el-input disabled v-model="form.workTimeInfo1" type="text" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="上班打卡时间">
        <el-input disabled v-model="form.clockInTimeOriginal" type="text" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="上班打卡结果">
        <el-select v-model="form.clockInStatus" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="修改上班打卡时间" prop="punchTime">
        <el-time-picker v-model="form.clockInTime" format="HH:mm" value-format="yyyy-MM-dd HH:mm:ss" placeholder="任意时间点"></el-time-picker>
      </el-form-item>
      <el-form-item label="下班打卡时间">
        <el-input disabled v-model="form.clockOutTimeOriginal" type="text" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="下班打卡结果">
        <el-select v-model="form.clockOutStatus" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="修改下班打卡时间" prop="clockOutTime">
        <el-time-picker v-model="form.clockOutTime" format="HH:mm" value-format="yyyy-MM-dd HH:mm:ss" placeholder="任意时间点"></el-time-picker>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入" :autosize="{ minRows: 4, maxRows: 6 }" maxlength="200" show-word-limit></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { updateCheckRecord } from "@/api/checkData";
import {parseTime} from '@/utils'
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: null,
    },
  },
  watch: {
    item: {
      handler(nv) {
        this.form = nv;
        if (this.show) {
            console.log(nv)
          this.form.workTimeInfo1 = parseTime(nv.timeStart, '{h}:{i}:{s}') +'-'+ parseTime(nv.timeEnd, '{h}:{i}:{s}');
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      form: {},
      rules: {
        //punchTime: { required: true, message: '请选择上班打卡时间', trigger: 'change' },
        //clockTime: { required: true, message: '请选择下班打卡时间', trigger: 'change' },
      },
      options: [
        {value: -1, label: '缺卡'},
        {value: 0, label: '待打卡'},
        {value: 1, label: '正常打卡'},
        {value: 2, label: '迟到打卡'},
        {value: 3, label: '非工作日打卡'},
        {value: 4, label: '请假'},
        {value: 7, label: '外勤'}
      ]
    };
  },
  methods: {
    submit() {
      this.$refs['form'].validate(async (valid) => {
        try {
          if(valid) {
            const _form = {
              id: this.form.id,
              clockInTime: this.form.clockInTime,
              clockOutTime: this.form.clockOutTime,
              clockInStatus: this.form.clockInStatus,
              clockOutStatus: this.form.clockOutStatus,
              remark: this.form.remark,
            };
            const res = await updateCheckRecord(_form);
            this.$emit("confirm");
          }
        } catch (error) {}

      })
    },
    close() {
      this.$emit("update:show", false);
    },
  },
};
</script>
